<template>
  <el-form
    ref="addRef"
    :model="addData"
    :rules="rules"
    label-width="80px"
    label-position="top"
    class="demo-ruleForm"
  >
    <el-row>
      <el-form-item label="库区编号" prop="code">
        <el-input v-model="addData.code" disabled />
      </el-form-item>
      <el-form-item label="所属仓库" prop="warehouseId">
        <el-select v-model="addData.warehouseId" placeholder="请选择">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="库区名称" prop="name">
        <el-input v-model="addData.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="温度类型" prop="temperatureType">
        <el-select v-model="addData.temperatureType" placeholder="请选择">
          <el-option v-for="(item, index) in temperatureTypeList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="承重类型" prop="bearingType">
        <el-select v-model="addData.bearingType" placeholder="请选择">
          <el-option v-for="(item, index) in bearingTypeList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="用途属性" prop="useType">
        <el-select v-model="addData.useType" placeholder="请选择">
          <el-option v-for="(item, index) in useTypeList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="personName">
        <el-input v-model="addData.personName" maxlength="10" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="addData.phone" placeholder="请输入" />
      </el-form-item>
    </el-row>
    <el-form-item label="库区状态" prop="status" class="last">
      <el-radio-group v-model="addData.status">
        <el-radio :label="1">启用</el-radio>
        <el-radio :label="0">停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-row>
      <div>
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-row>
  </el-form>
</template>

<script>
import { addArea, getAllWareHouse, queryArea, changeArea } from '@/api'
export default {
  data() {
    return {
      addData: {
        code: '',
        status: 1,
        warehouseId: ''
      },
      // 校验规则
      rules: {
        code: [
          { required: true, message: '编码不能为空', trigger: 'blur' }
        ],
        warehouseId: [
          { required: true, message: '所属仓库不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '库区名称不能为空', trigger: 'blur' }
        ],
        temperatureType: [
          { required: true, message: '温度类型不能为空', trigger: 'blur' }
        ],
        bearingType: [
          { required: true, message: '承重类型不能为空', trigger: 'blur' }
        ],
        useType: [
          { required: true, message: '用途属性不能为空', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '库区状态不能为空', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
        ]
      },
      // 温度类型
      temperatureTypeList: [
        { value: 'CW', label: '常温' },
        { value: 'LC', label: '冷藏' },
        { value: 'HW', label: '恒温' }
      ],
      // 承重类型
      bearingTypeList: [
        { value: 'ZX', label: '重型' },
        { value: 'BX', label: '中型' },
        { value: 'QX', label: '轻型' }
      ],
      // 用途属性
      useTypeList: [
        { value: 'RKHCQ', label: '入库缓存区' },
        { value: 'CKHCQ', label: '出库缓存区' },
        { value: 'CCQ', label: '存储区' },
        { value: 'FLQ', label: '分拣区' },
        { value: 'ZJQ', label: '质检区' }
      ],
      // 所属仓库
      list: [],
      id: ''
    }
  },
  async created() {
    if (this.$route.params.id) {
      this.getId()
    } else {
      this.getCode()
    }
    const { data } = await getAllWareHouse()
    console.log(data)
    this.list = data
  },
  methods: {
    async getCode() {
      this.addData.code = this.$route.params.code
    },
    async getId() {
      this.id = this.$route.params.id
      const { data } = await queryArea(this.id)
      this.addData = data
    },
    // 提交
    submit() {
      this.$refs.addRef.validate(async(valid) => {
        if (!valid) return
        if (this.$route.params.id) {
          await changeArea(this.addData)
        } else {
          await addArea(this.addData)
        }
        this.$router.replace({ name: 'Area' })
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.el-form-item {
  width: 205px;
}
.last {
  margin-left: 90px;
}
.el-button {
  width: 200px;
  border-radius: 50px;
}
</style>
